{% extends 'baykeshop/base_site.html' %}

{% load bayketags %}

{% block title %}{{ title }}{% endblock %}
{% block meta_desc %}{{ desc }}{% endblock %}
{% block meta_kw %}{{ keywords }}{% endblock %}


{% block breadcrumb %}
<div class="container">
	<nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
		<ul>
			<li><a href="{% url 'baykeshop:home' %}">首页</a></li>
            <li>
                {% for cate in cates %}
                    <a href="{% url 'baykeshop:cate-detail' cate.id %}">{{ cate.name }}</a>
                {% endfor %}
            </li>
			<li class="is-active"><a href="#" aria-current="page">{{ title }}</a></li>
		</ul>
	</nav>
</div>
{% endblock %}


{% block container %}
<div class="columns">
    <div class="column is-3">
        {% include 'baykeshop/product/comp/banners.html' with banners=baykeproductbanner_set %}
    </div>
    <div class="column">
        <h1 class="is-size-5 has-text-justified has-text-weight-bold mb-2">{{ title }}</h1>
        <div id="product">
            {{ baykeproductsku_set|json_script:"product-data" }}
            {{ specs|json_script:"specs-data" }}
            <div class="box is-marginless is-radiusless has-background-primary-dark has-text-white-ter">
                <div class="is-flex is-justify-content-space-between is-align-items-center">
                    <div>
                        <span class="is-size-7"> 原价：¥ <del>{$ sku.cost_price $}</del></span>
                        <h1 class="is-size-4">¥ {$ sku.price $}</h1>
                    </div>
                    <div class=" has-text-centered">
                        {$ sku.sales $}
                        <h1>销量</h1>
                    </div>
                </div>
            </div>

            <!-- specs规格数据获取 -->
            <div class="box is-radiusless is-marginless">
                <div class="is-flex is-align-items-center" v-for="spec, index in specsData" :key="spec.id" style="height:40px;">
                    <div class="has-text-grey-light">{$ spec.name $}：</div>
                    <div class="is-flex is-flex-wrap-wrap is-flex-grow-1">
                        <div class="mr-2" v-for="op, i in spec.baykeproductspecoption_set" :key="op.id" style="flex: 0 0 25%;">
                            <b-radio-button v-model="radioButton[index]"
                                :native-value="op.name"
                                size="is-small"
                                type="is-primary is-light is-outlined">
                                <span>{$ op.name $}</span>
                            </b-radio-button>
                        </div>
                    </div>
                </div>

                <!-- 数量 -->
                <div class=" is-flex is-align-items-center mt-3">
                    <div class=" has-text-grey-light">数量：</div>
                    <div>
                        <b-numberinput 
                            controls-position="compact" 
                            min="1" 
                            :max="stock" 
                            v-model="num"
                            size="is-small"
                            :editable="false">
                        </b-numberinput> 
                    </div>
                    <div class=" has-text-grey-dark ml-3">(库存{$ stock $})</div>
                </div>
                <!-- 数量end -->

            </div>
            
            <!-- 加入购物车按钮及一键购买 -->
            <div class="box is-radiusless">
                <b-button 
                    type="is-primary"
                    @click="addCart"
                    :disabled="stock ? false : true">
                    加入购物车
                </b-button>
                <b-button 
                    type="is-primary" 
                    :disabled="stock ? false : true"
                    @click="nowBuy"
                    outlined>
                    立即购买
                </b-button>
            </div>
            <!-- 加入购物车按钮及一键购买 -->

            <!-- 详情 -->
            <div class="box is-radiusless mt-3">
                <b-tabs class="block">
                    <b-tab-item label="商品详情">
                        <div class="content">
                            {{ content|safe }}
                        </div>
                    </b-tab-item>
                    <b-tab-item label="商品评价">
                        <div class="is-flex is-justify-content-space-between p-2">
                            <div class="">满意度：{{ rate }}%</div>
                            <div class="is-flex is-align-items-center">
                                <span> 评分：</span>
                                <b-rate 
                                    :value="{{ score }}" 
                                    disabled 
                                    custom-text="{{ score }}分">
                                </b-rate>
                            </div>
                        </div>
                        <div class=" dropdown-divider"></div>
                        {% for comment in comments %}
                            <article class="media">
                                <figure class="media-left">
                                    <p class="image is-32x32">
                                        <img class="is-rounded" src="{{ comment.owner.baykeuser.avatar }}">
                                    </p>
                                </figure>
                                <div class="media-content">
                                    <p>
                                        {{ comment.owner.username }}
                                        <b-rate size="is-small" :value="{{ comment.comment_choices }}" disabled custom-text="{{ comment.comment_choices }}分"></b-rate>
                                    </p>
                                    <p class=" is-size-7">{{ comment.add_date }}</p>
                                    <p class=" has-text-grey-light">{{ comment.content }}</p>
                                </div>
                            </article>
                        {% empty %}
                            <p class=" has-text-centered has-text-danger mt-6">还没有任何评价内容哦！</p>
                        {% endfor %}
                    </b-tab-item>
                    <b-tab-item label="售后服务">
                        <div class="content">
                            {{ after_sale|safe }}
                        </div>
                    </b-tab-item>
                </b-tabs>
            </div>
        </div>
    </div>

    <div class="column is-2">
        {% spuhots as spus %}
        <h1 class="has-text-centered has-background-white pt-3 is-size-6 pb-3 has-text-weight-bold">热销排行</h1>
        <div class=" dropdown-divider is-marginless"></div>
        {% for spu in spus %}
            <div class="has-background-white">
                {% spubox spu %}
            </div>
            <div class="dropdown-divider"></div>
        {% endfor %}
    </div>
</div>
{% endblock %}


{% block vue %}
    <script>
        var productData = JSON.parse(document.getElementById('product-data').textContent);
        var specsData = JSON.parse(document.getElementById('specs-data').textContent);
        var product = new Vue({
            el: "#product",
            delimiters: ['{$', '$}'],
            data: {
                productData,
                specsData,
                sku:{
                    price:0,
                    cost_price:0,
                    sales: 0,
                    stock: 0,
                },
                num: 1,
                stock: 0,
                radioButton: [],
                watchProductDatas:{}
            },
            created() {
                this.getProduct()
            },
            methods: {
                getProduct(){
                    if (this.productData.length > 0){
                        this.watchProduct()
                        let sku_item = this.productData[0]
                        let ops = this.getOpsName(sku_item.options)
                        // 默认选中规格
                        this.sku = this.watchProductDatas[ops]
                        this.radioButton = ops.split(',')
                    }
                },

                // 整理数据
                watchProduct(){
                    this.productData.forEach(element => {
                        let ops = this.getOpsName(element.options)
                        this.watchProductDatas[ops] = element
                    });
                },

                // 获取sku规格
                getOpsName(ops){
                    let ops_items = []
                    ops.forEach(op => {
                        ops_items.push(op.name)
                    })
                    return ops_items.join()
                },
                
                // 加入购物车
                addCart(){
                    request({
                        url: "{% url 'baykeshop:cart-list' %}",
                        method: 'post',
                        data:{
                            sku: this.sku.id,
                            count: this.num
                        }
                    }).then(res => {
                        if (res.status == 403){
                            bayke.toastMessage("is-danger", "未登录，请登录后操作！")
                            return
                        }
                        if (res.status == 201) {
                            bayke._data.cartcount += this.num
                            bayke.toastMessage('is-success', '加入购物车成功')
                        }
                    })
                },

                // 立即购买
                nowBuy(){
                    location.href = '{% url "baykeshop:confirm" %}?skuid='+`${this.sku.id}&count=${this.num}`
                }
            },
            watch:{
                // 监听点击规格
                radioButton:{
                    handler:function(val){
                        let specs = val.join()
                        let item_sku = this.watchProductDatas[specs]
                        if (item_sku) {
                            this.sku = item_sku
                            this.stock = item_sku.stock
                        }else{
                            this.stock = 0
                        }
                    },
                    immediate: true,
                    deep:true
                }
            }
        })
    </script>
{% endblock %}
    